<template>
  <page title="教室需求审批" :hasBack="false">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="会议审批" name="first">
        <el-row :gutter="20" class="header-title">
          <el-col :span="6">
          </el-col>
          <el-col :span="2">
            <span class="center">排序方式</span>
          </el-col>
          <el-col :span="4">
            <el-select v-model="sortType" placeholder="按申请时间" @change="handleSort">
              <el-option
                  v-for="item in sort"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="2">
            <span class="center">承办部门</span>
          </el-col>
          <el-col :span="4">
            <el-select v-model="partType" placeholder="全部">
              <el-option
                  v-for="item in part"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="2">
            <span class="center">项目名称</span>
          </el-col>
          <el-col :span="4">
            <el-input prefix-icon="el-icon-search" v-model="searchKey"></el-input>
          </el-col>
        </el-row>
        <el-table ref="table1" :data="table" header-cell-class-name="table-header" :default-sort="{ prop: 'createTime',order: 'descending'}">
          <el-table-column
              prop="needStatus"
              sortable
              label="状态">
            <template #default="scope">
              <el-tag class="tag" :type="statusMap[scope.row.needStatus].type" effect="dark">
                {{ statusMap[scope.row.needStatus].status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="name"
              label="项目名称">
          </el-table-column>
          <el-table-column
              label="培训时间">
            <template #default="scope">
              <p style="margin: 0;">起:{{scope.row.startDate.substring(0,10)}}</p>
              <p style="margin: 0;">止:{{scope.row.endDate.substring(0,10)}}</p>
            </template>
          </el-table-column>
          <el-table-column
              label="承办部门">
            <template #default="scope">
              {{scope.row.part.name}}
            </template>
          </el-table-column>
          <el-table-column
              label="申请人">
            <template #default="scope">
              {{scope.row.user.name}}
            </template>
          </el-table-column>
          <el-table-column
              prop="createTime"
              sortable
              label="申请时间">
          </el-table-column>
          <el-table-column
              prop="approveTime"
              label="审批时间">
          </el-table-column>
          <el-table-column
              label="操作">
            <template #default="scope">
              <el-button
                  type="text"
                  @click="handleLook(scope.$index, scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row justify="end" class="footer-pager">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[8, 10, 12, 14, 16]"
              :page-size="currentSize"
              layout="sizes, prev, pager, next, jumper"
              :total="tableData.length">
          </el-pagination>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="培训项目审批" name="second">
        <el-row :gutter="20" class="header-title">
          <el-col :span="6">
          </el-col>
          <el-col :span="2">
            <span class="center">排序方式</span>
          </el-col>
          <el-col :span="4">
            <el-select v-model="sortType" placeholder="按申请时间" @change="handleSort">
              <el-option
                  v-for="item in sort"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="2">
            <span class="center">承办部门</span>
          </el-col>
          <el-col :span="4">
            <el-select v-model="partType" placeholder="全部">
              <el-option
                  v-for="item in part"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="2">
            <span class="center">项目名称</span>
          </el-col>
          <el-col :span="4">
            <el-input prefix-icon="el-icon-search" v-model="searchKey"></el-input>
          </el-col>
        </el-row>
        <el-table ref="table2" :data="table" header-cell-class-name="table-header" :default-sort="{ prop: 'createTime',order: 'descending'}">
          <el-table-column
              prop="needStatus"
              sortable
              label="状态">
            <template #default="scope">
              <el-tag class="tag" :type="statusMap[scope.row.needStatus].type" effect="dark">
                {{ statusMap[scope.row.needStatus].status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="name"
              label="项目名称">
          </el-table-column>
          <el-table-column
              label="培训时间">
            <template #default="scope">
              <p style="margin: 0;">起:{{scope.row.startDate.substring(0,10)}}</p>
              <p style="margin: 0;">止:{{scope.row.endDate.substring(0,10)}}</p>
            </template>
          </el-table-column>
          <el-table-column
              label="承办部门">
            <template #default="scope">
              {{scope.row.part.name}}
            </template>
          </el-table-column>
          <el-table-column
              prop="applicant"
              label="申请人">
            <template #default="scope">
              {{scope.row.user.name}}
            </template>
          </el-table-column>
          <el-table-column
              prop="createTime"
              sortable
              label="申请时间">
          </el-table-column>
          <el-table-column
              prop="approveTime"
              label="审批时间">
          </el-table-column>
          <el-table-column
              label="操作">
            <template #default="scope">
              <el-button
                  type="text"
                  @click="handleLook(scope.$index, scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row justify="end" class="footer-pager">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[8, 10, 12, 14, 16]"
              :page-size="currentSize"
              layout="sizes, prev, pager, next, jumper"
              :total="tableData.length">
          </el-pagination>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </page>
</template>

<script>
import Page from "@/components/Page";
import axios from "axios";

export default {
  name: "ClassroomRA",
  components:{Page},
  data() {
    return {
      tableData:[],
      sort:[{
        value: '1',
        label: '按申请时间'
      }, {
        value: '2',
        label: '按申请状态'
      }],
      part:[{
        id:'0',
        name: "全部"
      }],
      statusMap:{
        "0":{
          type:"warning",
          status:"审批中",
        },
        "1":{
          type:"danger",
          status:"待修改",
        },
        "2":{
          type:"success",
          status:"已通过",
        },
      },
      currentPage: 1,
      currentSize: 8,
      partType: '',
      searchKey:'',
      sortType: '',
      activeName:'first',
    };
  },
  methods:{
    handleLook(index,row){
      this.$router.push('classApp?id='+row.id);
    },
    handleSizeChange(val) {
      this.currentSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleClick(tab){
      if(parseInt(tab.index)  === 0){
        this.findAllClassroomProjectSession();
      }else{
        this.findAllClassroomProject();
      }
    },
    findAllClassroomProject(){
      return axios.get(this.$host+"/project/classroomneed").then(response=>{
        if(response.data.code === 0){
          this.tableData = response.data.data;
        }
      })
    },
    findAllClassroomProjectSession(){
      return axios.get(this.$host+"/project/classroomneed/session").then(response=>{
        if(response.data.code === 0){
          this.tableData = response.data.data;
        }
      })
    },
    findAllPart(){
      return axios.get(this.$host+"/part").then(response=>{
        if(response.data.code === 0){
          this.part.push(...response.data.data);
        }
      })
    },
    handleSort(val){
      console.log(val);
      switch (val){
        case "1":
          console.log("createTime")
          this.$refs.table1?.sort("createTime","ascending")
          this.$refs.table2?.sort("createTime","ascending")
          break;
        case "2":
          console.log("projectStatus")
          this.$refs.table1?.sort("needStatus","ascending")
          this.$refs.table2?.sort("needStatus","ascending")
          break;
      }
    },
  },
  created() {
    this.findAllClassroomProjectSession().then(()=>this.findAllPart());
  },
  computed:{
    table(){
      return this.tableData.slice((this.currentPage-1)*this.currentSize,
          Math.min(this.currentPage*this.currentSize,this.tableData.length)).filter((value)=>{
        return this.partType === ''||this.partType ==='0'|| value.part.id === this.partType;
      }).filter((value => {
        return this.searchKey === ''|| value.name.indexOf(this.searchKey) !== -1;
      }));
    }
  }
}
</script>

<style scoped>
body{
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  margin: 0;
}

.tag{
  border-radius: 20px;
  padding-left: 15px;
  padding-right: 15px;
}
</style>